<template>
  <div ref="chartUser" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  name: 'bar',
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '280px',
    },
    titleValue: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const chartUser = ref<HTMLDivElement | null>(null);
    const { setOptions, resize } = useECharts(chartUser as Ref<HTMLDivElement>);
    onMounted(() => {
      window.addEventListener('resize', function () {
        resize()
      })
    })
    let seriesData = props.chartData;
    let legend = props.chartData.map((item) => {
      return item.name;
    });
    let userTit = props.titleValue.title;
    let proportion = props.titleValue.proportion;
    let color = ['#000', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
    const option = reactive({
      // color:color,
      // backgroundColor: '#000',
      color: color,
      title: {
        text: '{val|' + proportion + '}\n {name|' + userTit + '}',
        top: 'center',
        left: '14%',
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#7D8590',
              textAlign: 'center',
              // padding: [10, 0]
            },
            val: {
              fontSize: '1.875rem',
              textAlign: 'center',
              color: '#333333',
            },
          },
        },
      },
      grid: {
        top: '15%',
        left: 0,
        right: '1%',
        bottom: 5,
        containLabel: true,
      },
      legend: {
        orient: 'vertical',
        top: 'center',
        left: '50%',
        itemWidth: 26,
        itemHeight: 16,

        itemGap: 15,
        textStyle: {
          align: 'left',
          verticalAlign: 'middle',
          rich: {
            name: {
              color: '#424542',
              fontSize: 15,
              width: 60,

              padding: [10, 15, 10, 15],//
            },
            value: {
              color: '#002439',
              fontSize: 15,
              width: 50,
              padding: [10, 25, 10, 15],
            },
            rate: {
              color: '#686868',
              fontSize: 15,
              padding: [10, 7, 10, 3],
            },
          },
        },
        data: legend,
        formatter: (name) => {
          if (seriesData.length) {
            const item = seriesData.filter((item) => item.name === name)[0];
            return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
          }
        },
      },
      series: [
        {
          name: '需求类型占比',
          type: 'pie',
          colorBy: 'data',
          center: ['25%', '50%'],
          radius: ['55%', '70%'],
          label: {
            normal: {
              show: false,
              position: 'center',
              // formatter: '{value|{c}}\n{label|{b}}',
              rich: {
                value: {
                  padding: 5,
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 32,
                },
                label: {
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 16,
                },
              },
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: '12',
              },
            },
          },
          labelLine: {
            show: false,
            length: 0,
            length2: 0,
          },
          itemStyle: {
            normal: {
              color: function (colors) {
                var colorList = ['#46a6ff', '#8146ff', '#30e8bb', '#f9c807', '#ff9447'];
                return colorList[colors.dataIndex];
              },
            },
          },
          data: [],
        },
      ],
    });

    watchEffect(() => {
      props.chartData && initCharts();
    });

    function initCharts() {
      if (props.option) {
        Object.assign(option, cloneDeep(props.option));
      }
      // let seriesData = props.chartData.map((item) => {
      //   return item.value;
      // });
      // let xAxisData = props.chartData.map((item) => {
      //   return item.name;
      // });
      option.series[0].data = seriesData;

      // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

      // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

      setOptions(option);
    }
    return { chartUser };
  },
});
</script>
